<template>
  <div class="search-form">
    <el-table :data="[queryParams]" style="width: 100%">
      <el-table-column label="用户ID" width="200">
        <template #default="scope">
          <el-input v-model="queryParams.userId" placeholder="请输入用户ID" clearable />
        </template>
      </el-table-column>
      <el-table-column label="所在地区" width="260">
        <template #default="scope">
          <el-cascader
            v-model="selectedRegion"
            :options="regionOptions"
            :props="{
              value: 'value',
              label: 'label',
              children: 'children'
            }"
            placeholder="请选择所在地区"
            clearable
            @change="handleRegionChange"
          />
        </template>
      </el-table-column>
      <el-table-column label="联系人" width="200">
        <template #default="scope">
          <el-input v-model="queryParams.contact" placeholder="请输入联系人" clearable />
        </template>
      </el-table-column>
      <el-table-column label="手机号" width="200">
        <template #default="scope">
          <el-input v-model="queryParams.mobile" placeholder="请输入手机号" clearable />
        </template>
      </el-table-column>
      <el-table-column label="是否默认" width="200">
        <template #default="scope">
          <el-select v-model="queryParams.isDefault" placeholder="请选择" clearable>
            <el-option label="是（默认地址）" :value="1">
              <span style="float: left">是</span>
              <span style="float: right; color: #8492a6; font-size: 13px">默认地址</span>
            </el-option>
            <el-option label="否（非默认地址）" :value="0">
              <span style="float: left">否</span>
              <span style="float: right; color: #8492a6; font-size: 13px">非默认地址</span>
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="200">
        <template #default>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { getFullAreaData } from '@/utils/areaData'

interface QueryParams {
  pageNum: number
  pageSize: number
  userId?: string | number
  province: string
  city: string
  town: string
  contact: string
  mobile: string
  isDefault?: number
}

const emit = defineEmits(['search', 'reset'])

const selectedRegion = ref<string[]>([])
const regionOptions = ref(getFullAreaData())

const queryParams = reactive<QueryParams>({
  pageNum: 1,
  pageSize: 10,
  userId: undefined,
  province: '',
  city: '',
  town: '',
  contact: '',
  mobile: '',
  isDefault: undefined
})

// 处理地区选择变化
const handleRegionChange = (value: string[]) => {
  if (value && value.length === 3) {
    queryParams.province = value[0]
    queryParams.city = value[1]
    queryParams.town = value[2]
  } else {
    queryParams.province = ''
    queryParams.city = ''
    queryParams.town = ''
  }
}

// 查询
const handleSearch = () => {
  emit('search', { ...queryParams })
}

// 重置
const handleReset = () => {
  selectedRegion.value = []
  queryParams.userId = undefined
  queryParams.province = ''
  queryParams.city = ''
  queryParams.town = ''
  queryParams.contact = ''
  queryParams.mobile = ''
  queryParams.isDefault = undefined
  emit('reset')
}

defineExpose({
  queryParams
})
</script>

<style scoped>
.search-form {
  margin-bottom: 20px;
}

:deep(.el-table__header) {
  background-color: #fff;
}

:deep(.el-table__cell) {
  padding: 8px 0;
}

:deep(.el-input) {
  width: 100%;
}

:deep(.el-cascader) {
  width: 100%;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-button + .el-button) {
  margin-left: 8px;
}
</style> 